<template>
    <div id="classify">
        <ul>
            <router-link tag="li" to="/classify/wechat">
                <i class="fa fa-wechat"></i>
                <span>111</span>
            </router-link>
            <router-link tag="li" to="/classify/weibo">
                <i class="fa fa-weibo"></i>
                <span>222</span>
            </router-link>
            <router-link tag="li" to="/classify/chrome">
                <i class="fa fa-chrome"></i>
                <span>333</span>
            </router-link>
            <router-link tag="li" to="#2">
                <i class="fa fa-qq"></i>
                <span>444</span>
            </router-link>
            <router-link tag="li" to="#3">
                <i class="fa fa-phone"></i>
                <span>555</span>
            </router-link>
            <router-link tag="li" to="/classify/photo">
                <i class="fa fa-photo"></i>
                <span>666</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: "classify",
}
</script>

<style scoped>
#classify {
    width: 100%;
	max-width: 768px;
	background-color: #dedede;
	box-shadow: 0 1px 3px #7c7c7c;
}
#classify ul {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
#classify ul li{
	display: flex;
    flex-direction: column;
    align-items: center;
	width: 25%;
    height: 60px;
    line-height: 30px;
	padding: 15px 8px;
	text-align: center;
	font-size: 18px;
}
#classify ul li>i {
    padding-top: 10px;
}
#classify li:hover {
    cursor: pointer;
    background-color: #27e7ee;
}
#classify li.router-link-active {
	color: #0a86e5;
}
</style>